<script setup lang="ts"></script>
<template>
  <!-- 1.验证身份 -->
  <div v-if="123" class="box container">
    <div class="head xtx-center-head">更换手机号码</div>
    <div>
      <!-- 步骤条 -->
      <div class="yzm">
        <div class="item active">
          <div class="step"></div>
          <div class="num">1</div>
          <div class="line line-right"></div>
          <p>验证身份</p>
        </div>
        <div class="item">
          <div class="step"></div>
          <div class="num">2</div>
          <div class="line"></div>
          <p>修改手机号码</p>
        </div>
        <div class="item">
          <div class="step"></div>
          <div class="num">3</div>
          <div class="line"></div>
          <p>完成更改</p>
        </div>
      </div>

      <!-- 已绑定的手机 -->
      <div class="bdphone">
        <p>已绑定的手机：180****1849</p>
        <span>若该手机号已无法使用请联系客服</span>
      </div>
      <!-- 发送验证码 -->
      <div class="fsyzm">
        <div class="xtx-form-item">
          <label class="yanzm">验证码：</label>
          <input class="inp" type="text" placeholder="短信验证码" />
          <span class="fsyanzm">发送验证码</span>
        </div>
        <div class="btn">
          <label class="btla"></label>
          <button>下一步</button>
        </div>
      </div>
      <!-- 温馨提示 -->
      <div class="xtx-safe-warn">
        <span class="wxts">温馨提示</span>
        <p>为保障您的帐号安全，变更重要信息需要身份验证</p>
        <p>若有疑问请联系在线客服或拨打400-0000-000（周一至周日 8:00-18:00）</p>
      </div>
    </div>
  </div>
  <!-- 2.修改手机号码 -->
  <div v-else class="box container">
    <div class="head xtx-center-head">更换手机号码</div>
    <div>
      <!-- 步骤条 -->
      <div class="yzm">
        <div class="item active">
          <div class="step"></div>
          <div class="num">1</div>
          <div class="line line-right"></div>
          <p>验证身份</p>
        </div>
        <div class="item">
          <div class="step"></div>
          <div class="num">2</div>
          <div class="line"></div>
          <p>修改手机号码</p>
        </div>
        <div class="item">
          <div class="step"></div>
          <div class="num">3</div>
          <div class="line"></div>
          <p>完成更改</p>
        </div>
      </div>

      <!-- 已绑定的手机 -->
      <div class="bdphone">
        <p>已绑定的手机：180****1849</p>
        <span>若该手机号已无法使用请联系客服</span>
      </div>
      <!-- 发送验证码 -->
      <div class="fsyzm">
        <div class="xtx-form-item">
          <label class="yanzm">验证码：</label>
          <input class="inp" type="text" placeholder="短信验证码" />
          <span class="fsyanzm">发送验证码</span>
        </div>
        <div class="btn">
          <label class="btla"></label>
          <button>下一步</button>
        </div>
      </div>
      <!-- 温馨提示 -->
      <div class="xtx-safe-warn">
        <span class="wxts">温馨提示</span>
        <p>为保障您的帐号安全，变更重要信息需要身份验证</p>
        <p>若有疑问请联系在线客服或拨打400-0000-000（周一至周日 8:00-18:00）</p>
      </div>
    </div>
  </div>
  <!-- 3.完成更换 -->
  <!-- <div v-if="123" class="box container">
    <div class="head xtx-center-head">更换手机号码</div>
    <div class="bigduihao">
      <div class="duihao">✔</div>
      <p class="phone">手机号码更换成功</p>
      <p class="exlogin">您可以在下次使用新号码进行登录</p>
      <button>返回</button>
    </div>
  </div> -->
</template>
<style lang="less">
.container {
  width: 995px;
  height: 100%;
  // margin-left: 537px;
  // background-color: pink;
}
.xtx-center-head {
  width: 945px;
  height: 100%;
  margin: 0 auto;
}
// .active {
//   width: 48px;
//   height: 48px;
//   background-color: #27ba9b;
// }
.line-right {
  position: absolute;
  top: 23px;
  height: 2px;
  background-color: #e4e4e4;
  width: 50%;
  top: 190px;
  left: 232px;
}
.box {
  height: 1080px;
  background: #fff;
  .head {
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid #f5f5f5;
  }
  .yzm {
    padding: 50px 120px;
    display: flex;
    // align-items: center;
    // align-content: center;
    user-select: none;
    .item {
      width: 251px;
      height: 83px;
      flex: 1;
      text-align: center;
      line-height: 83px;
      .step {
        height: 48px;
        position: relative;
      }
      .num {
        border-color: #27ba9b;
        background-color: #27ba9b;
        color: #fff;
        width: 48px;
        height: 48px;
        border: 2px solid #e4e4e4;
        border-radius: 50%;
        line-height: 44px;
        font-size: 28px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }
      // .line {
      //   // position: absolute;
      //   // top: 192px;
      //   // height: 2px;
      //   // background-color: #27ba9b;
      //   // width: 11%;
      //   // right: 617px;
      //   // left: 50%;
      // }
    }
  }
  .bdphone {
    margin-top: 50px;
    margin-bottom: 40px;
    text-align: center;
    p {
      font-size: 18px;
    }
    span {
      color: #999;
    }
  }
  .fsyzm {
    padding-left: 260px;
    height: 180px;
    .xtx-form-item {
      position: relative;
      padding-bottom: 40px;
      display: flex;
      .yanzm {
        width: 100px;
        padding-right: 15px;
        text-align: right;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        color: #999;
      }
      .inp {
        width: 300px;
        height: 50px;
        border: 1px solid #e4e4e4;
        padding-left: 10px;
      }
      input {
        outline: none;
        padding: 0;
      }
      .fsyanzm {
        position: absolute;
        left: 310px;
        top: 16px;
        color: #27ba9b;
      }
    }
  }
  .btn {
    position: relative;
    padding-bottom: 40px;
    display: flex;
    .btla {
      margin-right: 17px;
      width: 100px;
      padding-right: 15px;
      text-align: right;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      color: #999;
    }
    button {
      width: 300px;
      height: 50px;
      background: #27ba9b;
      border-radius: 4px;
      display: block;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      border: 0px;
    }
  }
  .xtx-safe-warn {
    margin: 40px;
    padding: 20px;
    background: #f5f5f5;
    color: #999;
    line-height: 30px;
    .wxts {
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #333;
    }
  }
  // 第三个页面

  .bigduihao {
    padding-top: 150px;
    text-align: center;
    color: #999;
    height: 423px;
    .duihao {
      width: 80px;
      height: 80px;
      background: #1dc779;
      border-radius: 50%;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-size: 45px;
      margin: 0 auto;
      margin-top: 20px;
    }
    .phone {
      font-size: 20px;
      padding: 20px 0;
    }
    .exlogin {
      font-size: 16px;
      padding-bottom: 20px;
    }
    button {
      width: 180px;
      height: 50px;
      background: #27ba9b;
      border-radius: 4px;
      display: block;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 0 auto;
      border-width: 0px;
    }
  }
}
</style>
